<template>
  <!-- 我的订单详情页面 -->
  <view class="main">
    <view class="xian_d"></view>
    <!-- 已退款 -->
    <view class="o_code" v-if="orderDetail.status == 6">
      <view class="one"> 已退款 </view>
      <view class="three1">
        <image src="../../imges/tuikuan_.png" mode="aspectFill"></image>
      </view>
    </view>
    <!-- 交易成功 -->
    <view
      class="o_code"
      v-if="orderDetail.status == 4 || orderDetail.status == 3"
    >
      <view class="one"> 交易成功 </view>
      <view class="two"> 感谢您的支持 </view>
      <view class="three1">
        <image src="../../imges/ganxie.png" mode="aspectFill"></image>
      </view>
    </view>

    <!-- 待收货 -->
    <view class="o_code" v-if="orderDetail.status == 2">
      <view class="one"> 待收货 </view>
      <view class="two"> 请留意您的物流信息 </view>
      <view class="three1">
        <image src="../../imges/cart_.png" mode="aspectFill"></image>
      </view>
    </view>
    <!-- 待发货 -->
    <view class="o_code" v-if="orderDetail.status == 1">
      <view class="one"> 待发货 </view>
      <view class="two"> 您的订单正在光速备货中 </view>
      <view class="three1">
        <image src="../../imges/beihuo.png" mode="aspectFill"></image>
      </view>
    </view>
    <!-- 平台处理中 -->
    <view class="o_code" v-if="orderDetail.status == 5">
      <view class="one"> 平台处理中 </view>
      <view class="two"> 请等运营人员处理 </view>
      <view class="three1">
        <image src="../../imges/odchuli.png" mode="aspectFill"></image>
      </view>
    </view>
    <view class="xian_d"></view>
    <view
      class="kuaidi"
      v-if="orderDetail.status != 1 && orderDetail.expressCode"
    >
      <view class="left_">
        <image src="../../imges/kaundi_.png" mode="aspectFill"></image>
      </view>
      <view class="right_">
        <view class="top">
          {{ orderDetail.deliveryExpress }}
        </view>
        <view class="bottom">
          {{ orderDetail.expressCode }}
          <text
            v-if="orderDetail.expressCode"
            @tap="copy(orderDetail.expressCode)"
            >复制</text
          >
        </view>
      </view>
    </view>
    <view
      class="xian_d"
      v-if="orderDetail.status != 1 && orderDetail.expressCode"
    ></view>
    <view class="address">
      <image src="../../imges/dingwei_.png" mode="aspectFill"></image>
      <view class="right_">
        <view class="top_">
          {{ orderDetail.receiveName }}&nbsp;&nbsp;{{
            orderDetail.receivePhone
          }}
        </view>
        <view class="bottom_">
          收货地址：{{ orderDetail.provinceCity }}&nbsp;{{
            orderDetail.fullAddress
          }}
        </view>
      </view>
    </view>
    <!-- 商品清单 -->
    <view class="goods_">
      <view class="goods_item">
        <view class="title_"> 商品清单 </view>
        <view class="bo_">
          <image :src="orderDetail.goodsImg" mode="aspectFill"></image>
          <view class="goods_right">
            <view class="desc">
              {{ orderDetail.goodsName }}
            </view>
            <view class="price">
              ¥{{ orderDetail.presentPrice }}
              <text>x{{ orderDetail.nums }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="goods_price">
      <view class="title"> 商品价格 </view>
      <view class="row">
        <view class="left_"> 商品总价 </view>
        <view class="right_"> ¥{{ orderDetail.totalPrice }} </view>
      </view>
      <view class="row">
        <view class="left_"> 运费 </view>
        <view class="right_" v-if="orderDetail.isFreight == 0"> 免费 </view>
        <view class="right_" v-if="orderDetail.isFreight == 1">
          ¥{{ orderDetail.freight }}
        </view>
      </view>
      <view class="row">
        <view class="left_"> 实付款 </view>
        <view class="right_"> ¥{{ orderDetail.paymentPrice }} </view>
      </view>
    </view>
    <!-- 订单详情 -->
    <view class="order_">
      <view class="row">
        <view class="left_"> 订单详情 </view>
        <view class="right_">
          <text v-if="orderDetail.orderCode" @tap="copy(orderDetail.orderCode)"
            >复制</text
          >
          {{ orderDetail.orderCode }}
        </view>
      </view>
      <view class="row" v-if="orderDetail.createTime">
        <view class="left_"> 下单时间 </view>
        <view class="right_">
          {{ orderDetail.createTime }}
        </view>
      </view>
      <view
        class="row"
        v-if="orderDetail.status != 1 && orderDetail.deliveryTime"
      >
        <view class="left_"> 发货时间 </view>
        <view class="right_">
          {{ orderDetail.deliveryTime }}
        </view>
      </view>
      <view
        class="row"
        v-if="
          orderDetail.status != 1 &&
          orderDetail.status != 2 &&
          orderDetail.orderStatus == 3 &&
          orderDetail.receiveTime
        "
      >
        <view class="left_"> 收货时间 </view>
        <view class="right_">
          {{ orderDetail.receiveTime }}
        </view>
      </view>

      <view
        class="row"
        v-if="
          orderDetail.status != 1 &&
          orderDetail.status != 2 &&
          orderDetail.orderStatus == 9 &&
          orderDetail.calculationStatus == 9 &&
          orderDetail.receiveTime
        "
      >
        <view class="left_"> 收货时间 </view>
        <view class="right_">
          {{ orderDetail.receiveTime }}
        </view>
      </view>
    </view>
    <!-- 退款 -->
    <view class="order_tui">
      <view class="row row1" v-if="orderDetail.reportTime">
        <view class="left_"> 投诉时间 </view>
        <view class="right_">
          {{ orderDetail.reportTime }}
        </view>
      </view>
      <view class="row" v-if="orderDetail.feedbackTime">
        <view class="left_"> 处理时间 </view>
        <view class="right_">
          {{ orderDetail.feedbackTime }}
        </view>
      </view>

      <view v-if="isReport == 1">
        <view
          class="row"
          v-if="
            orderDetail.reportStatus == 0 ||
            orderDetail.reportStatus == 1 ||
            orderDetail.reportStatus == 2
          "
        >
          <view class="left_"> 处理情况 </view>
          <view class="right_" v-if="orderDetail.reportStatus == 0">
            未处理
          </view>
          <view class="right_" v-if="orderDetail.reportStatus == 1">
            已驳回
          </view>
          <view class="right_" v-if="orderDetail.reportStatus == 2">
            已退款
          </view>
        </view>
      </view>

      <view class="row" v-if="orderDetail.status == 6">
        <view class="left_"> 处理方式 </view>
        <view class="right_"> 退回钱包 </view>
      </view>
      <view class="row" v-if="orderDetail.status == 6">
        <view class="left_"> 退回金额 </view>
        <view class="right_"> ¥{{ orderDetail.paymentPrice }} </view>
      </view>
    </view>
    <navigator
      :url="'/pages/index/personal?id=' + orderDetail.businessUid"
      class="footer_btn"
    >
      <image src="../../imges/liaotian_.png" mode="aspectFill"></image>
      <text>联系卖家</text>
    </navigator>

    <view class="xian_d"></view>
    <view class="foot_b">
      <navigator
        :url="
          '/pages/webGoods/complaint?id=' +
          orderDetail.id +
          '&businessUid=' +
          orderDetail.businessUid
        "
        class="tousu_"
        v-if="
          orderDetail.calculationStatus != 1 &&
          isReport == 0 &&
          !orderDetail.reportTime
        "
      >
        投诉
      </navigator>

      <navigator
        :url="'/pages/my_circle/report?id=' + orderDetail.id + '&type=2'"
        class="tousu_"
        v-if="
          orderDetail.calculationStatus == 1 &&
          isReport == 0 &&
          !orderDetail.reportTime
        "
      >
        反馈
      </navigator>
      <navigator
        :url="
          '/pages/webGoods/payConfirmation?id=' +
          orderDetail.goodsInfoId +
          '&tieziId=' +
          tieId
        "
        class="more_"
        v-if="orderDetail.orderStatus == 3"
      >
        再来一单
      </navigator>

      <view class="more_" v-if="orderDetail.status == 2" @tap="handleQue">
        确定收货
      </view>
    </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
import uniCopy from "../../components/uni-copy.js";
export default {
  data() {
    return {
      orderId: "",
      orderDetail: {},
      tieId: "",
      isReport: "",
    };
  },
  components: {
    uniCopy,
  },
  onLoad(options) {
    if (options.id) {
      this.orderId = options.id;
      this.tieId = options.tieId;
      this.isReport = options.isReport;
    }

    this.handleDetail();
  },
  onShow() {
    this.handleDetail();
  },
  methods: {
    // 触发方法
    copy(content) {
      uniCopy({
        content: content,
        success: (res) => {
          // console.log(res)
          uni.showToast({
            title: "复制成功",
            icon: "none",
          });
        },
        error: (e) => {
          uni.showToast({
            title: e,
            icon: "none",
            duration: 2000,
          });
        },
      });
    },
    handleQue() {
      uni.showModal({
        title: "提示",
        content:
          "确定收货后交易将结束，请确定是否已收到货物，且货物没有质量问题？",
        success: (re) => {
          if (re.confirm) {
            let token = uni.getStorageSync("token");
            // console.log(token, 'token')
            if (!token) {
              uni.showToast({
                title: "请授权登录再操作！",
                duration: 2000,
                icon: "none",
              });
              setTimeout(() => {
                uni.navigateTo({
                  url: "/pages/index/index",
                });
              }, 2000);
            } else {
              request({
                url: "app/goods/orderConfirmReceipt",
                method: "POST",
                header: {
                  "Content-Type": "application/json",
                  "api-client": "72e0fee8172411ea995200163e05ff66",
                  "api-version": "1.3.3",
                  "Source-Type": 7,
                  token: token,
                },
                data: {
                  id: this.orderId,
                },
              }).then((res) => {
                if (res.data.code == 200) {
                  uni.showToast({
                    title: "收货成功",
                    duration: 2000,
                    icon: "none",
                  });
                  this.handleDetail();
                } else {
                  uni.showToast({
                    title: res.data.msg,
                    duration: 2000,
                    icon: "none",
                  });
                }
              });
            }
          }
        },
      });
    },
    handleDetail() {
      let token = uni.getStorageSync("token");
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/goodsOrder/goodsInfo",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            id: this.orderId,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            this.orderDetail = res.data.data;
            // console.log(this.orderDetail)
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  padding-bottom: 30rpx;

  .foot_b {
    display: flex;
    justify-content: flex-end;
    padding: 30rpx;

    .tousu_ {
      width: 140rpx;
      height: 60rpx;
      background: #ffffff;
      border-radius: 30rpx;
      border: 2rpx solid #979797;
      line-height: 60rpx;
      text-align: center;
      font-size: 26rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #2a2a2a;
    }

    .more_ {
      width: 159rpx;
      height: 60rpx;
      background: #3165ec;
      border-radius: 30rpx;
      line-height: 60rpx;
      text-align: center;
      font-size: 26rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      margin-left: 28rpx;
    }
  }

  .order_tui {
    margin-top: 20rpx;
    padding: 0 25rpx;
    // border-top: 2rpx solid #eee;

    .row {
      display: flex;
      justify-content: space-between;
      margin-top: 20rpx;
      font-size: 26rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #2a2a2a;
    }

    .row1 {
      padding-top: 15rpx;
      border-top: 2rpx solid #eee;
    }
  }

  .footer_btn {
    width: 244rpx;
    height: 69rpx;
    background: #ffffff;
    border-radius: 35rpx;
    border: 2rpx solid #3165ec;
    display: flex;
    line-height: 69rpx;
    padding: 0 39rpx;
    align-items: center;
    margin: 20rpx auto;
    margin-top: 55rpx;
    box-sizing: border-box;
    justify-content: space-between;
    margin-bottom: 30rpx;

    image {
      width: 36rpx;
      height: 36rpx;
    }

    text {
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #3165ec;
    }
  }

  .order_ {
    padding: 0 25rpx;
    width: 750rpx;
    box-sizing: border-box;

    .row {
      margin-top: 20rpx;
      display: flex;
      justify-content: space-between;
      font-size: 26rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #2a2a2a;

      .right_ {
        text {
          display: inline-block;
          width: 45rpx;
          height: 26rpx;
          background: #f7f7f7;
          border-radius: 4rpx;
          border: 2rpx solid #dbdbdb;
          line-height: 26rpx;
          text-align: center;
          font-size: 16rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #a4a4a4;
          margin-right: 15rpx;
        }
      }
    }
  }

  .goods_price {
    padding: 0 26rpx;
    box-sizing: border-box;
    width: 750rpx;

    .title {
      font-size: 26rpx;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #2a2a2a;
    }

    .row {
      display: flex;
      justify-content: space-between;
      margin-top: 20rpx;
      font-size: 26rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #2a2a2a;

      &:last-child {
        padding-bottom: 25rpx;
        border-bottom: 2rpx solid #eee;
      }
    }
  }

  .goods_ {
    padding: 25rpx;

    .goods_item {
      width: 700rpx;
      height: 235rpx;
      background: #f8f8f8;
      padding: 20rpx 17rpx;
      box-sizing: border-box;

      .title_ {
        font-size: 26rpx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #2a2a2a;
      }

      .bo_ {
        margin-top: 18rpx;
        display: flex;
        align-items: center;

        > image {
          width: 130rpx;
          height: 130rpx;
          background: #d8d8d8;
          border-radius: 8rpx;
          flex-shrink: 0;
        }

        .goods_right {
          margin-left: 24rpx;
          display: flex;
          height: 100rpx;
          flex-direction: column;
          justify-content: space-between;

          .desc {
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #2a2a2a;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
          }

          .price {
            font-size: 30rpx;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #2a2a2a;

            text {
              display: inline-block;
              font-size: 26rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #2a2a2a;
              margin-left: 16rpx;
            }
          }
        }
      }
    }
  }

  .xian_d {
    background-color: #f7f7f7;
    height: 15rpx;
    width: 750rpx;
  }

  .address {
    padding: 36rpx 42rpx;
    padding-bottom: 0;
    width: 750rpx;
    box-sizing: border-box;
    display: flex;

    > image {
      width: 36rpx;
      height: 38rpx;
      flex-shrink: 0;
      margin-right: 26rpx;
    }

    .right_ {
      .top_ {
        font-size: 30rpx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #2a2a2a;
      }

      .bottom_ {
        margin-top: 15rpx;
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #2a2a2a;
      }
    }
  }

  .kuaidi {
    padding: 22rpx 38rpx;
    width: 750rpx;
    box-sizing: border-box;
    display: flex;

    // align-items: center;
    .left_ {
      width: 40rpx;
      height: 40rpx;
      display: flex;
      align-items: center;
      margin-right: 23rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .right_ {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .top {
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #2a2a2a;
      }

      .bottom {
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #2a2a2a;

        text {
          margin-left: 15rpx;
          display: inline-block;
          width: 45rpx;
          height: 26rpx;
          background: #f7f7f7;
          border-radius: 4rpx;
          border: 2rpx solid #dbdbdb;
          line-height: 26rpx;
          text-align: center;
          font-size: 16rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #a4a4a4;
        }
      }
    }
  }

  .o_code {
    display: flex;
    align-items: center;
    height: 100rpx;
    padding: 0 25rpx;
    width: 750rpx;
    box-sizing: border-box;

    .one {
      //margin-top: -2rpx;
      position: relative;
      top: -2rpx;
      font-size: 30rpx;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #fb4566;
    }

    .two {
      padding-left: 40rpx;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffaa00;
    }

    .three1 {
      width: 33rpx;
      height: 33rpx;
      display: flex;
      align-items: center;
      margin-left: 11rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
